﻿<template>
    <div v-cloak class="flex-column" style="background-color: #F7F7F8; ">
        <component is="style" />
        <div class="flex-column-fill">
            <van-swipe style="height: 100%;" vertical v-on:change="change" :show-indicators="false" :initial-swipe="current" :loop="false">
                <van-swipe-item v-for="(item,index) in list">
                    <van-image width="100%"
                               height="100%"
                               :src="item.miUrl" fit="cover" v-on:error="error(index)"/>
                </van-swipe-item>
            </van-swipe>
        </div>
        <van-tabbar v-model="active" :safe-area-inset-bottom="false" :fixed="false">
            <van-tabbar-item v-for="item in urlList" :name="item.groupKey" :icon="item.icon">{{item.text}}</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'img',
            data: function () {
                return {
                    optor: hxt.store.optor,
                    browser: hxt.wxBrowser(), // 1：手机微信；4：小程序
                    urlList: [],
                    active: 0,
                    list: [],
                    current: 0,
                    hasMore: false,
                    pageIndex:1
                };
            },
            computed: {

            },
            activated: function () {

            },
            watch: {
                active: function (val) {
                    var _this = this;
                    _this.list = [];
                    _this.pageIndex = 1;
                    _this.loadList();
                }
            },
            mounted: function () {
                this.loadTitle();
            },
            methods: {
                loadTitle: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/mediaInfoTitle',
                        data: { type: 2 },
                        ok: function (res) {
                            if (res.code != 0) {
                                hxt.error("加载失败：" + res.errmsg);
                                return;
                            }
                            _this.urlList = res.data;
                            var obj = res.data.find(function (item) {
                                return item.isMain == 1
                            });
                            if (obj) {
                                _this.active = obj.groupKey;
                            };
                        }
                    })
                },
                loadList: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/mediaInfoList',
                        data: {
                            miGroupKey: _this.active,
                            pageSize: 20,
                            pageIndex: _this.pageIndex,
                        },
                        ok: function (res) {
                            if (res.code != 0) {
                                hxt.error("加载失败：" + res.errmsg);
                                return;
                            }
                            _this.list = _this.list.concat(res.data.list);
                            _this.pageIndex++;
                            _this.hasMore = _this.pageIndex <= (Math.ceil(res.data.rowCount / res.data.pageSize));
                        }
                    })
                },
                change: function (idx) {
                    this.current = idx;
                    if (idx >= this.list.length - 2 && this.hasMore) this.loadList();
                },
                error: function (idx) {
                    this.list.splice(idx, 1);
                }
            },
            components: {

            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .van-icon-x {
        display: block;
        height: 28px;
        width: 28px;
        text-align: center;
        line-height: 28px !important;
        font-size: 18px !important;
        border-radius: 3px;
    }

    .color-card {
        background-color: #00AA95;
        color: #FFF;
    }

    .color-app {
        background-color: #4B7DFF;
        color: #FFF;
    }

    .bg-mauve {
        background-color: #9c26b0;
        color: #FFF;
    }

    .bg-jxhd {
        background-color: #02995B;
        color: #FFF;
    }
</style>